<template>
    <el-form ref="ruleFormRef" label-width="auto" label-position="right" class="zw-form-layout">
        <el-row :gutter="24">
            <el-col :span="8">
                <el-form-item label="商品名称">
                    <el-input v-model.trim="ruleForm.goodsName" placeholder="输入商品名称" />
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="来源店铺">
                    <el-select v-model="ruleForm.shopId" filterable @click="onSelectShop">
                        <el-option label="全部" :value="0" />
                        <el-option
                            v-for="item in shopList"
                            :key="item.shopId"
                            :label="item.shopName"
                            :value="item.shopId" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col>
                <el-button type="primary" @click="onSearch">查询</el-button>
                <el-button plain @click="onReset">清空</el-button>
            </el-col>
        </el-row>
    </el-form>
</template>

<script setup>
import request from '@/request';
import { reactive, ref } from 'vue';
import { getShopListHook } from '@/hooks';

const emit = defineEmits(['search', 'reset']);
const ruleFormRef = ref();
const ruleForm = reactive({
    goodsName: '',
    shopId: 0
});
/* 获取店铺列表 */
const shopList = reactive([]);
const onSelectShop = async () => {
    if (shopList.length) return;
    const { data } = await getShopListHook();
    let list = data.list || [];
    shopList.push(...list);
};
const onSearch = () => {
    let result = {};
    for (const [key, value] of Object.entries(ruleForm)) {
        result[key] = value;
    }
    emit('search', result);
};
const onReset = () => {
    for (const [key, value] of Object.entries(ruleForm)) {
        ruleForm[key] = '';
        if (key === 'shopId') ruleForm[key] = 0;
    }
    let result = {};
    Object.assign(result, ruleForm);
    emit('reset', result);
};
</script>
<style lang="scss" scoped>
.el-form {
    padding: 16px 24px 16px 18px;
    margin-bottom: 16px;

    .el-row {
        margin: -8px -10px;

        .el-col {
            margin: 8px 0;

            &:last-of-type {
                flex: auto;
                text-align: right;
            }

            .el-form-item {
                margin-bottom: 0;

                .el-form-item__label-wrap {
                    .el-form-item__label {
                        font-size: 14px;
                        font-family: STHeitiSC-Light, STHeitiSC;
                        font-weight: 300;
                        color: #33302d;
                    }
                }

                .el-form-item__content {
                    .el-input,
                    .el-select,
                    .el-date-editor {
                        width: 100%;
                    }
                }
            }
        }
    }

    &__cascader-panel {
        display: none;
    }
}
</style>
